<template xmlns:th="http://www.w3.org/1999/xhtml">
  <div id="Catalog">
    <h2>朗姆芝士</h2>
    <div class="item_card_groups">
      <div class="item_card_group">
        <div
          id="item"
          v-for="productForm in productForms"
          :key="productForm.id"
        >
          <div class="item_card">
            <div class="item_card_pic">
              <div>
                <img id="pic" :src="productForm.img" />
              </div>
            </div>
            <div class="item_card_content">
              <div>
                <h4>
                  <a href="itemForm?itemId=EST-15">{{ productForm.id }}</a>
                </h4>
              </div>
              <div class="item_card_description">
                <div>{{ productForm.title }}</div>

                <div>1.0磅</div>

                <div>朗姆酒，柠檬，芝士</div>

                <div>酒香，微苦，清新的柠檬</div>

                <div>适合4-5人</div>

                <div>含5套餐具</div>
              </div>
              <div>朗姆芝士</div>
              <div>${{ productForm.price }}</div>
              <br />
              <br />

              <div>
                <a
                  :href="'/addItemToCart?workingItemId=' + productForm.id"
                  class="Button"
                  >加入购物车</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--/c:forEach-->
    </div>
  </div>
</template>

<script>
export default {
  name: "productForm",
  data() {
    return {
      productForms: [
        {
          img: "/src/assets/images/LMcheese.jpg",
          id: "EST-15",
          title: "CHEESE-04",
          price: 23.5,
        },
        {
          img: "/src/assets/images/LMcheese.jpg",
          id: "EST-15",
          title: "CHEESE-04",
          price: 23.5,
        },
        {
          img: "/src/assets/images/LMcheese.jpg",
          id: "EST-15",
          title: "CHEESE-04",
          price: 23.5,
        },
        {
          img: "/src/assets/images/LMcheese.jpg",
          id: "EST-15",
          title: "CHEESE-04",
          price: 23.5,
        },
      ],
    };
  },
};
</script>

<style scoped>
#item_att {
  width: 185px;
}
#item_box {
  margin: 40px auto;
}
</style>